<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="info" style="width: 100%; height: 100%"></div>
</template>
 <script setup>
import { onMounted, ref, inject } from "vue";

//通过inject使用echarts
const echarts = inject("echarts");

//通过ref获取html元素
const info = ref();

onMounted(() => {
  // 渲染echarts的父元素
  var infoEl = info.value;

  //  light dark
  var userEc = echarts.init(infoEl, "light");

  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "30%"],
    },
    visualMap: {
      type: "piecewise",
      show: false,
      dimension: 0,
      seriesIndex: 0,
      pieces: [
        {
          gt: 1,
          lt: 3,
          color: "rgba(0, 0, 180, 0.4)",
        },
        {
          gt: 5,
          lt: 7,
          color: "rgba(0, 0, 180, 0.4)",
        },
      ],
    },
    series: [
      {
        type: "line",
        smooth: 0.6,
        symbol: "none",
        lineStyle: {
          color: "#5470C6",
          width: 5,
        },
        markLine: {
          symbol: ["none", "none"],
          label: { show: false },
          data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
        },
        areaStyle: {},
        data: [
          ["2019-10-10", 200],
          ["2019-10-11", 560],
          ["2019-10-12", 750],
          ["2019-10-13", 580],
          ["2019-10-14", 250],
          ["2019-10-15", 300],
          ["2019-10-16", 450],
          ["2019-10-17", 300],
          ["2019-10-18", 100],
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  userEc.setOption(option);
});
</script>
 